<template>
  <div class="layout-header-bar">
    <van-nav-bar
      :title="title"
      left-text="返回"
      left-arrow
      class="layout-header-bars"
      safe-area-inset-top
      placeholder
      fixed
      :class="[showTitlePaddingTop?'title-message':'']"
      @click-left="onClickLeft"
    >
      <!-- <template #left>
        <div class="left-box">:class="[showTitlePaddingTop?'title-message':'']"
          <van-icon
            name="arrow-left"
            size="15"
            class="left-box-icon"
          ></van-icon>
          <span>返回</span>
        </div>
      </template> -->
      <template #right>
        <slot />
      </template>
    </van-nav-bar>
    <div class="nav-top-placeholder" :class="[showTitlePaddingTop?'title-message':'']" />
  </div>
</template>
<script>
import Vue from 'vue'
import { NavBar, Toast, Search } from 'vant'
Vue.use(Search)
import $router from '@/router'
import dd from 'gdt-jsapi'
export default {
  name: 'HeaderBar',
  components: {
    [NavBar.name]: NavBar
  },
  props: {
    title: {
      type: String,
      default: '标题'
    }
  },

  data() {
    return {
      arg: '',
      value: ''
    }
  },
  computed: {
    showTitlePaddingTop() {
      return this.$store.state.user.showTitlePaddingTop
    }
  },
  methods: {
    onClickLeft() {
      // this.$toast('返回');
      if (this.$route.name === 'ChiooceDistance') {
        this.$store.dispatch('user/refresh', false)
        dd.closePage()
      } else {
        this.$store.dispatch('user/refresh', false)
        this.$router.go(-1)
      }
    },
    onClickRight() {
      Toast('按钮')
    },
    onSearch() {
      this.$emit('onSearch', this.value)
    }
  }
}
</script>

<style scoped lang="scss">
.left-box {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  font-size: 30px;
}
.left-box-icon {
  font-size: 20px;
}
.nav-top-placeholder {
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
  height: 100px;
}
.layout-header-bars{
  position:fixed;

width:100%;
top:0;
z-index:9999;
background-color:#ffffff;
}
  .hidden-content{
    width:100%;
    height:12.26667vw;
  }
::v-deep .van-nav-bar__text{
  color:#222222;
  font-size: 32px;
  font-weight:500;
}
::v-deep .van-nav-bar .van-icon{
  color:#222222;
  font-weight:500;
}
::v-deep .van-nav-bar__title{
  font-size: 36px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #222222;
  max-width:40%;
}

.title-message{
  ::v-deep .van-nav-bar--safe-area-inset-top{
  padding-top:80px!important;
}
  padding-top:80px;
}
.title-message{
  ::v-deep .layout-header-bar{
    height: 40px!important;
  }
  ::v-deep .van-nav-bar--safe-area-inset-top{
    padding-top:80px!important;
    height:10px!important;
  }
}
::v-deep .van-hairline--bottom::after{
  border-bottom: none;
}
::v-deep .van-nav-bar__title{
  min-width:50%;
}
</style>
